<template>
  <div ref="wrap">
    <div ref="child" class="child">
      <slot></slot>
    </div>
    <div ref="more"></div>
  </div>
</template>

<script lang="ts" setup name="ScrollBoard">
import { onMounted, onUnmounted, ref, unref } from 'vue'
const wrap = ref<any>({ scrollTop: 0, scrollHeight: 0 })
const child = ref<any>({ scrollTop: 0, scrollHeight: 0 })
const more = ref<any>({ scrollTop: 0, scrollHeight: 0 })
const timer = ref()

onMounted(() => {
  const wrapRef = unref(wrap)
  const listRef = unref(child)
  const moreRef = unref(more)
  const speed = 110
  function scroll() {
    /*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0，否则就每个30默秒向上滚动1px */
    if (wrapRef?.scrollTop >= listRef.scrollHeight) {
      wrapRef.scrollTop = 0
    } else {
      wrapRef.scrollTop++
    }
  }

  if (listRef.offsetHeight >= wrapRef.offsetHeight) {
    moreRef.innerHTML = listRef.innerHTML
    if (timer.value) {
      clearInterval(timer.value)
    }
    timer.value = setInterval(scroll, speed)
  }

  wrapRef.onmouseout = function () {
    timer.value = setInterval(scroll, speed)
  }
  wrapRef.onmouseover = function () {
    clearInterval(timer.value)
  }
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style lang="scss" scoped></style>
